<script setup lang="ts">
import { getProductList } from "@/api/product/product";
import router from "@/router";
import type { TabPaneName, TabsPaneContext } from "element-plus";
import { ref } from "vue";
import { getCategoryList } from "@/api/category/category";
import myCookies from "@/utils/myCookies";
import { getOrderCount } from "@/api/order/order";
import {
  getReddProductsItemList,
  getReddProductsList,
} from "@/api/reddProducts/reddProducts";
import type { Banner, Product } from "@/types";
import { getBannerList } from "@/api/banner/banner";
import { getCartItmeCount } from "@/api/cart/cartItem";

interface ReddProducts {
  reddProductsName: string;
  label: string;
  productId: number;
  product: Product;
  name: string;
  status: number;
  pageNum: number;
  pageSize: number;
  icon: string;
}
const cartItemCount = ref(0);
const goodsNameList = ref([
  "玫瑰花",
  "月季花",
  "百合花",
  "康乃馨",
  "郁金香",
  "满天星",
  "栀子花",
  "向日葵",
  "紫罗兰",
  "茉莉花",
  "小雏菊",
  "小苍兰",
]);
const goodsList = ref<ReddProducts[]>([]);
const activeName = ref("like");
const loading = ref(false);
const categoryList = ref();
const token = ref();
const componentKey = ref(0);
const userInfo = ref();
const pendingPayment = ref(0);
const pendingReceiving = ref(0);
const pendingAppraise = ref(0);
const reddProductsList = ref<ReddProducts[]>([]);
const bannerList = ref<Banner[]>([]);
//获取分类导航
async function loadCategory() {
  await getCategoryList().then((response) => {
    categoryList.value = response.data.data;
  });
}
// 获取轮播图列表
async function loadBannerList() {
  await getBannerList().then((response) => {
    bannerList.value = response.data.rows;
  });
}

// 初始化
async function loadGoodsList() {
  loading.value = true;
  handleClick(activeName.value);
  // 个人信息初始化
  const locaUserInfo = localStorage.getItem("userInfo");
  userInfo.value = locaUserInfo == null ? null : JSON.parse(locaUserInfo);
  token.value = myCookies.getToken();
  if (myCookies.getToken() !== undefined) {
    //订单统计初始化
    await getOrderCount(0).then((response) => {
      pendingPayment.value = response.data.data;
    });
    await getOrderCount(2).then((response) => {
      pendingReceiving.value = response.data.data;
    });
    await getOrderCount(3).then((response) => {
      pendingAppraise.value = response.data.data;
    });
  }
  getReddList();
  loadCategory();
  loadBannerList();
  loading.value = false;
}

//当标签页项改变的时候触发
const handleClick = async (name: string) => {
  activeName.value = name;
  await getReddProductsItemList({ reddProductsName: name, status: 1 }).then(
    (response) => {
      goodsList.value = response.data.rows;
    }
  );
};
// 点击商品
const selectGoods = (item: any) => {
  console.log(item);
  // 跳转
  router.push("/product/detail/" + item.productId);
};
// 退出登录
const quit = () => {
  myCookies.removeToken();
  localStorage.removeItem("userInfo");
  router.push("/login");
};
//获推荐标签列表
async function getReddList() {
  await getReddProductsList().then((response) => {
    reddProductsList.value = response.data.data;
  });
}

loadGoodsList();
</script>
<template>
  <div class="common-layout" v-loading="loading">
    <el-container class="categoryAndUserInfo">
      <el-aside width="240px">
        <el-card shadow="never" class="left-card">
          <el-space direction="vertical" alignment="normal">
            <div
              style="
                font-size: larger;
                color: #000000;
                font-family: cursive;
                font-weight: 700;
              "
            >
              鲜花用途
            </div>
            <el-row>
              <el-col :span="8" v-for="item in categoryList">
                <el-link
                  :href="'/Search?category=' + item[0].name"
                  style="
                    color: rgb(85 98 191);
                    font-size: 15px;
                    font-family: fangsong;
                    font-weight: 600;
                  "
                  :underline="false"
                  target="_blank"
                  >{{ item[0].name }}</el-link
                >
              </el-col>
            </el-row>
            <div
              style="
                font-size: larger;
                color: #000000;
                font-family: cursive;
                font-weight: 700;
              "
            >
              鲜花花材
            </div>
            <el-row>
              <el-col :span="8" v-for="item in goodsNameList">
                <el-link
                  style="
                    color: rgb(85 98 191);
                    font-size: 15px;
                    font-family: fangsong;
                    font-weight: 600;
                  "
                  :href="'/Search?keyword=' + item"
                  :underline="false"
                  target="_blank"
                  >{{ item }}</el-link
                >
              </el-col>
            </el-row>
          </el-space>
        </el-card>
      </el-aside>
      <el-aside width="752px" height="400px" style="overflow: hidden">
        <el-carousel height="380px" indicator-position="outside">
          <el-carousel-item
            v-for="item in bannerList"
            :key="item"
            style="border-radius: 5px"
          >
            <el-link
              :href="item.productId !== null ? '/product/detail/' + item.productId : ''"
              target="_blank"
            >
              <el-image
                style="width: 752px; height: 400px"
                :src="item.bannerImg"
                fit="cover"
              />
            </el-link>
          </el-carousel-item>
        </el-carousel>
      </el-aside>
      <el-aside width="240px">
        <el-card shadow="never" class="r-card">
          <el-row
            :gutter="20"
            style="text-align: center; margin-top: 48px"
            :key="componentKey"
          >
            <el-col :span="24" style="cursor: pointer">
              <el-avatar
                v-if="
                  userInfo !== null &&
                  userInfo.avatar !== null &&
                  myCookies.getToken() !== undefined
                "
                :size="60"
                :src="userInfo.avatar"
                @click="router.push('/user/info')"
              />
              <el-avatar
                v-else
                :size="60"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              >
              </el-avatar>
              <div v-if="token !== undefined">
                <el-link :underline="false">
                  <el-text
                    style="width: 100px"
                    truncated
                    @click="router.push('/user/info')"
                    v-if="userInfo.nickname !== null"
                  >
                    {{
                      userInfo.nickname ? userInfo.nickname : "新用户" + userInfo.username
                    }}
                  </el-text></el-link
                >
                <div>
                  <el-link :underline="false" style="font-size: 12px" @click="quit"
                    >切换账号</el-link
                  >
                  <el-link
                    :underline="false"
                    style="margin-left: 10px; font-size: 12px"
                    @click="quit"
                    >退出</el-link
                  >
                </div>
              </div>
              <div v-else>
                <el-button
                  type="primary"
                  style="margin-top: 9px"
                  @click="router.push('/login')"
                  >立即登录</el-button
                >
              </div>
            </el-col>

            <el-col
              :span="12"
              style="margin-top: 10px; cursor: pointer"
              @click="router.push('/follow')"
            >
              <el-icon style="font-size: 20px"><Star /></el-icon>
              <div style="font-size: 12px">商品收藏</div>
            </el-col>

            <el-col
              :span="12"
              style="margin-top: 10px; cursor: pointer"
              @click="router.push('/user/info')"
            >
              <el-icon style="font-size: 20px"><UserFilled /></el-icon>
              <div style="font-size: 12px">个人信息</div>
            </el-col>
            <el-col
              :span="8"
              style="margin-top: 10px; cursor: pointer"
              @click="router.push('/orders?s=1')"
            >
              <el-icon style="font-size: 20px">{{ pendingPayment }}</el-icon>
              <div style="font-size: 12px">待付款</div>
            </el-col>
            <el-col
              :span="8"
              style="margin-top: 10px; cursor: pointer"
              @click="router.push('/orders?s=2')"
            >
              <el-icon style="font-size: 20px">{{ pendingReceiving }}</el-icon>
              <div style="font-size: 12px">待收货</div>
            </el-col>
            <el-col
              :span="8"
              style="margin-top: 10px; cursor: pointer"
              @click="router.push('/myComments?s=0')"
            >
              <el-icon style="font-size: 20px">{{ pendingAppraise }}</el-icon>
              <div style="font-size: 12px">待评价</div>
            </el-col>
          </el-row>
        </el-card></el-aside
      >
    </el-container>

    <el-main class="goods-layout">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane
          :label="item.label"
          :name="item.reddProductsName"
          v-for="item in reddProductsList"
        >
          <template #label>
            <span class="custom-tabs-label">
              <component class="custom-tabs-icon" :is="item.icon" />
              <span>{{ item.label }}</span>
            </span>
          </template>
          <el-space
            wrap
            style="
              justify-content: center;
              width: 100%;
              margin: 0 auto;
              max-width: 1300px;
            "
          >
            <el-card
              v-if="goodsList.length > 0"
              shadow="hover"
              v-for="item in goodsList"
              :key="item"
              class="card-item"
              style="width: 210px; margin: 10px; display: inline-block"
              @click="selectGoods(item)"
            >
              <el-image
                style="width: 100%; height: 200px"
                :src="item.product.img"
                fit="cover"
              />
              <template #footer>
                <div style="margin-left: 5px">
                  <el-text truncated style="color: black" tag="b">
                    {{ item.product.name }}
                  </el-text>
                </div>
                <div style="float: left; margin-left: 5px; margin-bottom: 5px">
                  <el-text class="mx-1" type="danger" size="large"
                    >￥{{ item.product.price }}
                    <el-text class="mx-1" type="danger" size="small">到手价</el-text>
                    <el-text
                      class="mx-1"
                      type="danger"
                      size="small"
                      style="margin-left: 10px"
                      >销量{{ item.product.sold }}</el-text
                    >
                  </el-text>
                </div>
              </template>
            </el-card>
            <el-empty v-else :description="'还没有' + item.label + '哦~'"> </el-empty>
          </el-space>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
</template>
<style lang="less">
.categoryAndUserInfo {
  height: 400px;
  .el-aside {
    // max-width: 1300px;
    margin: 0 auto; // 容器居中
    .el-card {
      height: 380px;
      background-color: rgb(244, 244, 244);
    }
  }
}
.demo-tabs {
  align-items: center;
  .el-tabs__nav {
    min-width: 1260px;
    .el-tabs__item {
      margin: auto;
    }
  }
}

.categorylink {
  color: #000;
  font-size: 14px;
  font-weight: normal;
}
.goods-layout {
  box-sizing: content-box;
}
</style>
<style lang="less">
.card-item {
  .el-card__body {
    padding: 0;
    height: 200px;
  }
}
.left-card {
  background-image: url("/src/assets/fenlei.jpg");
  /* 加载背景图 */

  /* 背景图垂直、水平均居中 */
  background-position: center center;

  background-size: 100% 100%;

  .el-card__body {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    .el-row {
      text-align: center;
      .el-col {
        margin-top: 4px;
        margin-bottom: 4px;
      }
    }
  }
}
.r-card {
  background: linear-gradient(rgba(179, 179, 179, 0.5), rgba(221, 207, 207, 0.1)),
    url("/src/assets/userImg.jpg") no-repeat 0% 40% / cover;
}
.custom-tabs-label {
  display: flex;
  .custom-tabs-icon {
    width: 16px;
    margin-right: 6px;
  }
}
</style>
